<template>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="PAGESIZES"
    layout="sizes, prev, pager, next, jumper"
    :total="400"
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts">
  export default { name: 'PaginationIndex' }
</script>

<script setup lang="ts">
  import { PAGE, SIZE, PAGESIZES } from '@/constant'
  const currentPage = ref(PAGE)
  const pageSize = ref(SIZE)

  const emit = defineEmits(['page'])

  const handleSizeChange = (val: number): void => {
    // page, size
    emit('page', currentPage.value, val)
  }

  const handleCurrentChange = (val: number): void => {
    emit('page', val, pageSize.value)
  }

  /**
   * 重置页码
   */
  const resetPage = (params?: { pageIndex?: number; pageSize?: number }) => {
    if (params.pageIndex) {
      currentPage.value = params.pageIndex
    }
    if (params.pageSize) {
      currentPage.value = params.pageSize
    }
  }

  defineExpose({
    resetPage,
  })
</script>
